<template>
  <!-- 完善信息 -->
  <el-dialog title="完善资料" :visible="value" width="700px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <div class="dialog-wszl">
      <div>
        <div class="wsxx-title">
          <div :class="[tabIndex==0?'cur':'']" @click="tabIndex=0">
            体征测量
          </div>
          <div :class="[tabIndex==1?'cur':'']" @click="tabIndex=1">
            病历信息
          </div>
          <div v-if="false" :class="[tabIndex==2?'cur':'']" @click="tabIndex=2">
            病历登记
          </div>
        </div>
      </div>
      <div v-if="value">
        <component0 v-show="tabIndex==0" v-bind="$attrs" @success="onSuccess"></component0>
        <component1 v-show="tabIndex==1" v-bind="$attrs" @success="onSuccess"></component1>
        <component2 v-if="false" v-show="tabIndex==2" v-bind="$attrs"></component2>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "noRegister"],
  components: {
    component0: () => import("./_com/bodyMeasure.vue"),
    component1: () => import("./_com/caseData.vue"),
    component2: () => import("./_com/illnessRegister.vue")
  },
  data() {
    return {
      tabIndex: "0"
    };
  },
  methods: {
    onOpen() {},
    onSuccess() {
      let th = this;
      th.$emit("success");
    },
    onClose() {
      let th = this;
      th.tabIndex = "0";
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-wszl {
  display: flex;
  flex-direction: column;
  max-height: 510px;
  > div:nth-child(1) {
    flex-shrink: 0;
  }
  > div:nth-child(2) {
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.wsxx-title {
  display: flex;
  cursor: pointer;
  > div {
    flex: 1;
    text-align: center;
    height: 45px;
    line-height: 45px;
    background-color: #f3f3f3;
    border: 1px solid #eee;
  }
  .cur {
    background-color: white !important;
    border-bottom-color: transparent;
  }
}
</style>

